<template>
  <div>
    <div>
      <el-row>
        <el-input
          v-model="textarea"
          :rows="3"
          type="textarea"
          placeholder="有什么新鲜事想分享给大家？"
        >
        </el-input>
      </el-row>
      <el-row>
        <el-col :span="1">
          <el-button
            class="icon-button"
            size="small"
            circle
            @click="showUpload"
          >
            <i class="el-icon-picture icons"></i>
          </el-button>
        </el-col>
        <el-col :span="1">
          <el-button
            id="code-btn"
            class="icon-button"
            size="small"
            @click="showCode"
            circle
            ><i id="doc" class="el-icon-document icons"></i
          ></el-button>
        </el-col>
        <el-col :span="15"> </el-col>
        <el-col :span="4">
          <el-select v-model="value" placeholder="技术">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1"> </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="medium"
            round
            style="font-weight: bold"
            @click="send"
            >发送</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <div class="upload" id="up">
          <upload-image />
        </div>
      </el-row>
      <Code />

      <div id="preview">
        <div class="title">预览</div>
        <pre
          class="hljs"
          highlightjs
        ><code id = "hljs1" v-html="markdown"></code></pre>
        <pre
          class="hljs"
          highlightjs
        ><code id = "hljs2" v-html="highlight"></code></pre>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImage from "./UploadImage.vue";
import { defineComponent, ref } from "vue";
import Code from "./Code.vue";
import hljs from "highlightjs";
import "highlight.js/styles/stackoverflow-light.css";
import MarkdownIt from "markdown-it";

export default defineComponent({
  components: {
    UploadImage,
    Code,
  },
  data() {
    return {
      isShow: false,
      isCode: false,
    };
  },
  setup() {
    return {
      textarea: ref(""),
      options: ref([
        {
          value: "live",
          label: "生活",
        },
        {
          value: "technology",
          label: "技术",
        },
      ]),
      value: ref("technology"),
    };
  },
  watch: {
    value(newval) {
      var btn = document.getElementById("code-btn");
      var doc = document.getElementById("doc");
      var pre = document.getElementById("preview");
      if (newval === "live") {
        btn.disabled = true;
        doc.style.color = "#dbdbdb";
        this.textarea = "";
        pre.style.display = "none";
      } else {
        btn.disabled = "false";
        doc.style.color = "#727272";
        this.textarea = "";
        pre.style.display = "block";
      }
    },
  },
  computed: {
    markdown() {
      const md = new MarkdownIt();
      const result = md.render(this.textarea);
      return result;
    },
    highlight() {
      const result = hljs.highlightAuto(this.textarea);
      return result.value;
    },
  },
  methods: {
    showUpload() {
      this.isShow = !this.isShow;
      var up = document.getElementById("up");
      if (this.isShow === true) {
        up.style.display = "block";
      } else {
        up.style.display = "none";
      }
    },
    showCode() {
      var doc = document.getElementById("doc");
      var hl1 = document.getElementById("hljs1");
      var hl2 = document.getElementById("hljs2");
      this.isCode = !this.isCode;
      if (this.isCode === true) {
        hl1.style.display = "none";
        hl2.style.display = "block";
        doc.style.color = "#409eff";
      } else {
        hl2.style.display = "none";
        hl1.style.display = "block";
        doc.style.color = "#727272";
      }
    },
    send() {
      if (this.textarea === "") {
        alert("提交内容不能为空！");
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 1.8vh;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.icons {
  font-size: 3vh;
  color: #727272;
  position: absolute;
  z-index: 2;
  left: -0.15vw;
  top: 0.4vh;
}

.icon-button {
  position: relative;
  z-index: 0;
  border: none;
}

.el-textarea__inner {
  border-radius: 20px;
}

.el-button:hover {
  background-color: rgb(255, 255, 255);
}
.el-button:focus {
  background-color: white;
}

.upload {
  display: none;
}

#preview {
  text-align: left;
}

.title {
  font-size: 4vh;
  font-weight: bold;
}

#hljs2 {
  display: none;
}
</style>
